<template>
  <div>
    <a-modal
        :destroyOnClose="true"
        :visible="this.mustVisible"
        title="创建必备字段"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <a-form :form="form">
        <a-form-item
            label="实体名"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-input
              v-decorator="['0.fieldName', {
                                rules: [{ required: true, message: '请输入实体名！' }],
                            }]"
              allowClear
              style="width: 80%"
          />
        </a-form-item>
        <a-form-item
            label="实体显示名"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-input
              v-decorator="['0.label', {
                                rules: [{ required: true, message: '请输入实体显示名！' }]
                            }]"
              allowClear
              style="width: 80%"
          />
        </a-form-item>
        <a-form-item
            label="实体类型"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-select
              v-decorator="['0.fieldType',{
                rules: [{ required: true, message: '请选择实体类型！' }],
                initialValue: 'long'
              }]"
              style="width: 80%"
          >
            <a-select-option value="long">
              长整型
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
            label="事件ID"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-input
              v-decorator="['1.fieldName', {
                                rules: [{ required: true, message: '请输入事件ID！' }]
                            }]"
              allowClear
              style="width: 80%"
          />
        </a-form-item>
        <a-form-item
            label="事件ID显示名"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-input
              v-decorator="['1.label', {
                                rules: [{ required: true, message: '请输入事件ID显示名！' }]
                            }]"
              allowClear
              style="width: 80%"
          />
        </a-form-item>
        <a-form-item
            label="事件ID类型"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-select
              v-decorator="['1.fieldType',{
                rules: [{ required: true, message: '请选择事件ID类型！' }],
                initialValue: 'long'
              }]"
              style="width: 80%"
          >
            <a-select-option value="long">
              长整型
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
            label="事件时间"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-input
              v-decorator="['2.fieldName', {
                                rules: [{ required: true, message: '请输入事件时间！' }]
                            }]"
              allowClear
              style="width: 80%"
          />
        </a-form-item>
        <a-form-item
            label="事件时间显示名"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-input
              v-decorator="['2.label', {
                                rules: [{ required: true, message: '请输入事件时间显示名！' }]
                            }]"
              allowClear
              style="width: 80%"
          />
        </a-form-item>
        <a-form-item
            label="事件时间类型"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-select
              v-decorator="['2.fieldType',{
                rules: [{ required: true, message: '请选择事件时间类型！' }],
                initialValue: 'long'
              }]"
              style="width: 80%"
          >
            <a-select-option value="long">
              长整型
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from 'vuex'

export default {
  name: "AddMustPopup",
  computed: {
    ...mapState('modelManage', ['mustVisible', 'currentKey'])
  },
  data() {
    return {
      form: this.$form.createForm(this)
    }
  },
  methods: {
    ...mapMutations('modelManage', ['setState']),
    ...mapActions('modelManage', ['queryModelList', 'saveBatchField', 'update']),
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let payload = []
          for (let valuesKey in values) {
            payload.push({
              ...values[valuesKey],
              modelId: this.currentKey,
              indexed: true,
              mustField: true
            })
          }
          this.saveBatchField(payload).then(() => {
            this.setState({name: 'mustVisible', value: false})
          })
          this.update({
            objectId: this.currentKey,
            status: 1,
            entityName: values[0].fieldName,
            entryName: values[1].fieldName,
            referenceDate: values[2].fieldName
          }).then(() => {
            this.queryModelList()
          })
        }
      });
    },
    handleCancel() {
      this.setState({name: 'mustVisible', value: false})
    }
  }
}
</script>

<style scoped>

</style>
